<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>订单中心</title>
    <link rel="stylesheet" href="css/tab.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            i=1;
            first = true;
            getInfo();
        })
        // 向从container添加数据
		$(window).scroll(function(){getInfo();});
		function getInfo() { 
			var winH = $(window).height();//页面可视区域高度 
		    var pageH = $(document).height(); //页面总高度 
		    var scrollT = $(window).scrollTop(); //滚动条top 
		    var aa = (pageH-winH-scrollT)/winH;
		    wait = false;
		    while (wait);
		    var nowait = true;
		    if(aa<0.1 && nowait || first){
			    first=false;
		    	wait = true;
		        nowait=false;
		        $.getJSON("HomeServlet",{page:i},function(json){
		        	if (json){
	                    $.each(json,function(index,array){ 
		        			var str = "";
		        			str += "<div class=\"taskarea\" onclick=\"location='task_message.html?id="+array['id']+"'\">" + 
	    					"                <div class=\"toptaskarea\">" + 
	    					"                    <div class=\"fl head1\">" + 
	    					"                        <img src=\"image/man.png\" style=\"margin-top:40px;\" />" + 
	    					"                    </div>" + 
	    					"                    <div class=\" fl content\">" + 
	    					"                        <div class=\"message\">" + 
	    					"                            <div class=\" fl info\">" + 
	    					"                                <div id=\"name\" class=\"name\">编号："+array['id']+"</div>" + 
	    					"                            </div>" + 
	    					"                            <div class=\"fl time\">"+calculateTime(array['time'])+"</div>" + 
	    					"                            <div class=\"clear\"></div>" + 
	    					"                        </div>" + 
	    					"                        <div class=\"textareacontent\">"+array['message']+"</div>" + 
	    					"                        <div class=\"money\">" + 
	    					"                            <span class=\"fl font2\">"+array['money']+"</span>" + 
	    					"                            <span class=\"fl font3\">元</span>" + 
	    					"                            <span class=\"fr font2\">"+array['status']+"</span>" + 
	    					"                            <div class=\"clear\"></div>" + 
	    					"                        </div>" + 
	    					"                    </div>" + 
	    					"                    <div class=\"clear\"></div>" + 
	    					"                </div>" + 
	    					"                <div class=\"bottomtaskarea\">" + 
	    					"                    <div class=\" fl font4\">送达：</div>" + 
	    					"                    <div class=\"fl font5\">"+array['address']+"</div>" + 
	    					"                </div>" + 
	    					"            </div>" + 
	    					"			<div class='clear'></div>";
	                        $("#quanbu").append(str); 
	                        switch(array['status']){
	                        case '未接单' : $("#daijiedan").append(str);break;
	                        case '已接单' : $("#yijiedan").append(str);break;
	                        case '已完成' : $("#yiwancheng").append(str);break;
	                        }
	                    });
		        	}
		        }); 
				nowait = true;
				wait = false;
				i++;
		     } 
		}
		
		// 计算时间差
		function calculateTime(startTime){
			var date1= startTime;  //开始时间  
		    var date2 = new Date();    //结束时间  
		    var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数 
		    
		    //计算出相差天数  
		    var days=Math.floor(date3/(24*3600*1000))
		  
		    //计算出小时数  
		    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数  
		    var hours=Math.floor(leave1/(3600*1000))  
		    
		    //计算相差分钟数  
		    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数  
		    var minutes=Math.floor(leave2/(60*1000))  
		    
		    var str = "刚刚"
		    if (days > 1){
		    	str = days + "天前"
		    }else if (hours > 1){
		    	str = hours + "小时前"
		    }else if(minutes > 1){
		    	str = minutes + "分钟前"
		    }
		    return str;
		}
    </script>
</head>
<body>
    <div class="title">我的订单 </div>
    <script type="text/javascript">
        /**
         * 切换选项卡
         * @return {[type]} [description]
         */
        function switch_tab() {
            var tits = document.getElementsByClassName("tab_tit");
            var cons = document.getElementsByClassName("tab_con");
            for (var i = 0; i < tits.length; i++) {
                tits[i].index = i;
                tits[i].onclick = function () {
                    for (var i = 0; i < tits.length; i++) {
                        tits[i].className = "tab_tit";
                    };
                    this.className += " tab_hover";
                    //切换选项卡对应的content
                    for (var i = 0; i < cons.length; i++) {
                        cons[i].className = "tab_con";
                    };
                    //根据tab的index属性来操作对应的tab标签
                    cons[this.index].className += " visiable";
                }
            }

        }
        //当window加载完成操作
        window.onload = function () {
            var tits = document.getElementsByClassName("tab_tit");
            var cons = document.getElementsByClassName("tab_con");
            tits[0].className += " tab_hover";
            switch_tab();
        }
    </script>
    <div id="tab">
        <div name="tab" class="tab_tit ">全部</div>
        <div name="tab" class="tab_tit">待接单</div>
        <div name="tab" class="tab_tit">已接单</div>
        <div name="tab" class="tab_tit">已完成</div>
        <!--  全部接单任务栏-->
        <div id="quanbu" class="tab_con visiable"></div>
        <!--  待接单任务栏-->
        <div id="daijiedan" class="tab_con"></div>
        <!--  已接单任务栏-->
        <div id="yijiedan" class="tab_con"></div>
        <!-- 已完成任务栏-->
        <div id="yiwancheng" class="tab_con"></div>
    </div>
    <div class="tabHost">
        <div onclick="location='index.html'" class="fl tab">
            <img src="image/tab1.png" style="margin-left:80px" />
            <div class="font6">首页</div>
        </div>
        <div onclick="location='Release_task.html'" class="fl tab">
            <img src="image/tab2.png" style="margin-left:80px" />
            <div class="font6">发布任务</div>
        </div>
        <div class="fl tab">
            <img src="image/tab04.png" style="margin-left:80px" />
            <div class="font6">订单</div>
        </div>
        <div onclick="location='Person.html'" class="fl tab">
            <img src="image/tab3.png" style="margin-left:80px" />
            <div class="font6">个人中心</div>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>